<template>
    <view class="container">
		<view class="contract_box">
			<view class="text-center padding-sm text-xl">投资合同书</view>
			<view class="text-right padding-sm">合同编号：{{ contract.contract_code  }}</view>
			<view class="padding-sm"><text class="text-bold">甲方（投资方）：</text>{{ contract.user_name  }}</view>
			<view class="padding-sm"><text class="text-bold">乙方（管理方）：</text>{{ contract.company }}</view>
			<view class="padding-sm"><text class="text-bold">丙方（担保方）：</text>{{ contract.guarantee  }}</view>
			<view class=" padding-sm">甲乙丙双方经友好协商，本着平等自愿、诚实信用的原则，就甲方使用乙方提供的本网站所有服务的</view>
			<view class="text-bold padding-sm">有关事项达成如下协议：</view>
			<view class="padding-sm">一、理财投资明细</view>
			<view class="text-content padding-sm">
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">产品名称</view>
					<view class="text-left content text-sm">{{ contract.title }}</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">投资人姓名</view>
					<view class="text-left content text-sm">{{ contract.user_name  }}</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">投资人身份证</view>
					<view class="text-left content text-sm">{{ contract.user_idcard  }}</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">投入本金数额<br>（下称"甲方投资本金"）</view>
					<view class="text-left content text-sm">{{ contract.money }}元</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">协议期</view>
					<view class="text-left content text-sm">
					{{ contract.day }}							
					<span v-if="contract.type1 === 6">个小时</span>
					<span v-else>天</span></view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">预期收益率</view>
					<view class="text-left content text-sm">{{ contract.rate }}%</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">起息日</view>
					<view class="text-left content text-sm">{{ contract.begintimes }}</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">到期日</view>
					<view class="text-left content text-sm">{{ contract.endtimes }}</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">应收本息（元）</view>
					<view class="text-left content text-sm">{{ contract.invest_total_money  }}元</view>
				</view>
				<view class="grid col-2 padding-xs">
					<view class="text-left content text-sm">还款方式</view>
					<view class="text-left content text-sm">{{ contract.type2 }}</view>
				</view>
			</view>
			<view class="text-content padding-sm padding-bottom-xl">
				<u-parse :content="contract.content" @preview="preview" @navigate="navigate" ></u-parse>
			</view>
			<view class="grid col-2 padding-sm">
				<view class="padding-top-xl">
					<view>甲方：{{ contract.user_name }}</view>
					<view class="padding-xs">{{ contract.create_date }}</view>
				</view>
				<view class="padding-top-xl contract_bg" :style="'background-image: url('+weburl+ contract.contract_img +');'">
					<view>乙方：{{ contract.company }}</view>
					<view class="padding-xs">{{ contract.create_date }}</view>
				</view>
			</view>
			<view class="grid col-2 padding-sm">
				<view class="padding-top-xl contract_bg" :style="'background-image: url('+weburl+ contract.contract1_img +');'">
					<view>丙方：{{ contract.guarantee }}</view>
					<view class="padding-xs">{{ contract.create_date }}</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue';
	
    export default {
		components: {
		    uParse
		},
        data() {
            return {
				modalName: null,
				code:0,
				contract: []
            }
        },
		onLoad: function (option) {
			this.code = option.code
            this.loadData();
		},
		methods: {
            loadData: function(type) {
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['code='+this.code,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getInvestContract",
					timestamp:timestamp,
					data:{code:this.code,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.contract = res.data.data.contract;
				})
            },
			preview(src, e) {
			  // do something
			},
			navigate(href, e) {
			  // do something
			},
		},
    }
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.text-content .grid{
		background-color: #fff;
		border: 2upx solid #eee;
	}
	.text-content .grid:nth-child(2n-1){
		background-color: #f5f5f5;
	}
	.contract_bg{
		background-size: 200upx;
		background-position: 50upx center;
		height: 200upx;
		background-repeat: no-repeat;
	}
</style>